<template>
  <div class="login-form-wrapper">
    <div class="login-form-title mb20">忘记密码</div>
    <a-form ref="loginForm" :model="userInfo" class="login-form" layout="vertical" @submit="handleSubmit">
      <a-form-item field="mobile" :rules="[{ required: true, message: '请输入手机号码' }]" :validate-trigger="['change', 'blur']" hide-label>
        <a-input v-model="userInfo.mobile" :placeholder="'请输入手机号码'">
          <template #prefix>
            <icon-user />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item field="smsCode" :rules="[{ required: true, message: '请输入验证码' }]" :validate-trigger="['change', 'blur']" hide-label>
        <a-input v-model="userInfo.smsCode" placeholder="请输入验证码" allow-clear>
          <template #append>
            <a-button type="text" size="small" @click="getSmsCode" v-if="countdown == 60">获取验证码</a-button>
            <a-button type="text" size="small" disabled v-else>{{ countdown }}S后重新获取</a-button>
          </template>
        </a-input>
      </a-form-item>
      <a-form-item field="password" :rules="[{ required: true, message: '密码不能为空' }]" :validate-trigger="['change', 'blur']" hide-label>
        <a-input-password v-model="userInfo.password" placeholder="请输入密码" allow-clear>
          <template #prefix>
            <icon-lock />
          </template>
        </a-input-password>
      </a-form-item>

      <a-space :size="16" direction="vertical">
        <div class="login-form-password-actions">
          <a-button type="text" size="small" @click="$emit('change')">去登录</a-button>
        </div>
        <a-button type="primary" html-type="submit" long :loading="loading"> 提交 </a-button>
      </a-space>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
import { message, post, get } from '@/utils'
import { ValidatedError } from '@arco-design/web-vue/es/form/interface'
import useLoading from '@/hooks/loading'
const emit = defineEmits(['change'])
const { loading, setLoading } = useLoading()

const userInfo = reactive({
  mobile: '',
  password: '',
  smsCode: '',
})

const handleSubmit = async ({ errors, values }: { errors: Record<string, ValidatedError> | undefined; values: Record<string, any> }) => {
  console.log('🚀 ~ handleSubmit ~ values:', values)
  if (loading.value) return
  if (!errors) {
    setLoading(true)
    post(
      { url: '/server-auth/update/loginPwd/seller', data: userInfo },
      ({ code, msg }) => {
        if (code == 200) emit('change')
        setLoading(code != 200)
        message({
          type: code == 200 ? 'success' : 'error',
          content: msg,
        })
      },
      () => setLoading(false)
    )
  }
}
let timer: any
const countdown = ref(60)
const getSmsCode = () => {
  if (!userInfo.mobile) {
    message({
      type: 'error',
      content: '请输入手机号码',
    })
    return
  }
  get({ url: '/server-auth/sign-up/sms/code', data: { mobile: userInfo.mobile } }, ({ code, msg }) => {
    if (code == 200) {
      timer = window.setInterval(() => {
        if (countdown.value == 0) {
          clearInterval(timer)
          countdown.value = 60
        }
        countdown.value--
      }, 1000)
    }
    message({
      type: code == 200 ? 'success' : 'error',
      content: msg,
    })
  })
}
</script>

<style lang="less" scoped>
.login-form {
  &-wrapper {
    width: 320px;
  }
  :deep(.arco-input-append) {
    padding: 0;
    .captcha {
      height: 4s0px;
    }
  }
  &-title {
    color: var(--color-text-1);
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
  }

  &-sub-title {
    color: var(--color-text-3);
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 24px;
  }

  &-error-msg {
    height: 32px;
    color: rgb(var(--red-6));
    line-height: 32px;
  }

  &-password-actions {
    display: flex;
    justify-content: space-between;
  }

  &-register-btn {
    color: var(--color-text-3) !important;
  }
}
</style>
